<template>
  <!-- 标题 -->
  <div id="home">
    <NavBar>
      <template v-slot:default>
        图书兄弟
      </template>
    </NavBar>
    <TabControl
      v-show="isTabFixed"
      @tabClick="tabClick"
      :titles="['畅销', '新书', '精选']"
    ></TabControl>
    <!-- 内容 -->
    <div class="wrapper">
      <div class="content">
        <div ref="banref">
          <!-- <HomeSwiper :banners="banners"></HomeSwiper> -->
          <home-swiper :banners="banners"></home-swiper>
          <RecommendView :recommends="recommendson"></RecommendView>
          <TabControl
            @tabClick="tabClick"
            :titles="['畅销', '新书', '精选']"
          ></TabControl>
          <goods-list :currentType="showGoods" />
        </div>
      </div>
      <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
    </div>
    <back-top @bTop="bTop" v-show="isShowBackTop"></back-top>
  </div>
</template>
<script>
import NavBar from "../../components/common/navbar/NavBar";
import { getHomeAllData } from "../../network/home";
import { getHomeGoods } from "../../network/home";
import RecommendView from "../home/ChildComps/RecommendView";
import HomeSwiper from "../home/ChildComps/HomeSwiper";
import TabControl from "../../components/content/tabControl/TabControl";
import { onMounted, reactive, ref, computed, watchEffect, nextTick } from "vue";
import GoodsList from "@/components/content/goods/GoodsList"; // 4
import BScroll from "better-scroll";
import BackTop from "@/components/common/backtop/BackTop"; // ️ 2-1 回到顶部
import { Toast } from "vant";
export default {
  name: "Home",
  components: {
    NavBar,
    RecommendView,
    TabControl,
    GoodsList,
    BackTop,
    HomeSwiper,
  },
  setup() {
    let isTabFixed = ref(false);
    let banref = ref(null); //
    let isShowBackTop = ref(false); // ️ 回到顶部按钮
    let banners = ref([]); // ⚪️ 3-4 轮播图
    const recommendson = ref([]);
    const goods = reactive({
      sales: { page: 1, list: [] },
      new: { page: 1, list: [] },
      recommend: { page: 1, list: [] },
    });
    // 当前类型数据
    const currentType = ref("sales");
    //监听
    const showGoods = computed(() => {
      // computed 计算属性
      return goods[currentType.value].list;
    });
    let bscroll = reactive({}); //  5 声明在外层 共用
    onMounted(() => {
      Toast.loading({ message: "我很慢，你要忍耐一下...", forbidClick: true });
      getHomeAllData().then((res) => {
        recommendson.value = res.goods.data;
        banners.value = res.slides;
      });
      getHomeGoods("sales").then((res) => {
        goods.sales.list = res.goods.data;
      });
      //   创建 BetterScroll 对象
      bscroll = new BScroll(document.querySelector(".wrapper"), {
        // 获取到最外层元素
        probeType: 3, // 0,1,2,3, 3 只要在运行就触发 scroll 事件
        click: true, // 是否允许点击
        pullUpLoad: true, // 上拉加载更多，默认 false
      });
      //  7 触发滚动事件 - scroll 事件 - 位置 position
      bscroll.on("scroll", (position) => {
        isShowBackTop.value = isTabFixed.value = -position.y > 300;
      });
      // 上拉加载更多数据，触发 pullingUp
      bscroll.on("pullingUp", () => {
        const page = goods[currentType.value].page + 1;
        getHomeGoods(currentType.value, page).then((res) => {
          goods[currentType.value].list.push(...res.goods.data);
          goods[currentType.value].page += 1;
        });
        // 完成上拉，等数据请求完成，要将新数据展示出来
        bscroll.finishPullUp();
        bscroll.refresh(); // 刷新 重新计算高度
      });
    });
    const tabClick = (index) => {
      let types = ["sales", "new", "recommend"];
      currentType.value = types[index];
      if (currentType.value == "sales") {
        getHomeGoods("sales").then((res) => {
          goods.sales.list = res.goods.data;
        });
      } else if (currentType.value == "new") {
        getHomeGoods("new").then((res) => {
          goods.new.list = res.goods.data;
        });
      } else if (currentType.value == "recommend") {
        getHomeGoods("recommend").then((res) => {
          goods.recommend.list = res.goods.data;
        });
      }
    };
    //  监听 任何一个变量有变化就会被触发
    watchEffect(() => {
      nextTick(() => {
        // nextTick 方法，当 DOM 渲染完了执行方法
        // 重新计算高度
        bscroll && bscroll.refresh();
      });
    });
    const bTop = () => {
      // ️ 2-7 回到顶部方法
      bscroll.scrollTo(0, 0, 500); // 前两个参数是x,y的位置，延迟 500 毫秒回到顶部
    };
    return {
      recommendson,
      tabClick,
      goods,
      currentType,
      showGoods,
      isTabFixed,
      banref,
      bTop,
      isShowBackTop,
      banners,
    };
  },
};
</script>
<style lang="scss" scoped>
#home {
  //  3 这一整块 固定高度
  height: 100vh; // 占领整个屏幕区域高度
  position: relative;

  .wrapper {
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0; // 左右为0 内容可居中
    right: 0;
    overflow: hidden; // 超出部分隐藏
  }
}
</style>
